<!-- 视图 -->
<template>
	<!-- 在视图中只能存在一个根组件 -->
	<div class="event">
		<ul>
			<li v-on:click="getItem(index,$event)" v-for="(name,index) in names" :key="index">{{name}}-{{index}}</li>
		</ul>
		<!-- 按键监听 -->
		<input type="text" v-on:keyup.enter="getKeyUp">
		<br/>
		<!-- 添加 -->
		<button v-on:click="pushData">push按钮</button>
		<br/>
		<!-- 过滤 -->
		<button v-on:click="getOdd">我要奇数</button>
		<br/>
		<!-- 反转 -->
		<span>{{msgRe}}</span>
	</div>
</template>
<!-- 行为 -->
<script>
	// 外部访问
	export default {
		data() {
			return {
				names: ['张三','李四','王五'],
				nums: [1,2,3,4,5,6],
				msg: 'abcde'

			}
		},
		methods:{
			//传递event对象
			getItem(index,event){
				alert(this.names[index]);
				console.log(index);
				console.log(event);
			},

			getKeyUp(event){
				console.log(event);
			},

			pushData(){
				this.names.push("赵六");
			},

			getOdd(){
				this.nums.filter(function(index) {
					if (index % 2 !== 0) {
						console.log(index);
					}
				});
			},
		},

		//计算
		computed: {
			msgRe() {
				return this.msg.split('').reverse().join('');
			}
		}

	}
</script>
<!-- 样式 -->
<style>
	.event {
		background: skyblue
	}
</style>